<template>
  <div class="order">
    <div class="order-list" v-if="orderList.length>0">
      <div class="order-goods" v-for="(goods,index) in orderList" :key="index" v-show="!goods.isPay">
        <div class="order-hd">
          <p class="g-store">
            {{goods.shopTitle}}
            <van-icon name="arrow" />
          </p>
          <p class="g-state">交易进行中</p>
        </div>
        <div class="order-bd">
          <img :src="goods.pictUrl" alt="">
          <div class="g-desc">
            <p class="g-title">{{goods.title | ginfofmt}}</p>
            <p class="g-price"><span>单价:</span> {{goods.price | gpricefmt}} 元</p>
            <p class="g-count"><span>数量:</span> {{goods.count}} 件</p>
            <p class="g-total"><span>总价:</span> <b>{{goods.count*goods.price | gpricefmt}} 元</b> </p>
            <p class="g-addtime"><span>创建订单时间:</span>&nbsp; {{goods.add_time | datefmt}}</p>
          </div>
        </div>
        <div class="order-operate">
          <span class="o-more">更多
            <van-icon name="arrow-down" />
          </span>
          <van-button @click="cancelOrder(goods.id)" round color="#999">取消订单</van-button>
          <van-button id="chooseAddress" @click="showPopup(goods.id)" round type="primary">选择收货地址</van-button>
          <van-popup class="user-addr" v-model="show" get-container="getAddress" round position="bottom" :style="{ height: '60%' }">
            <Address-List @click="getAid"></Address-List>
          </van-popup>
          <van-button @click="payOrder(goods.id)" round type="danger">支付</van-button>
        </div>
      </div>
    </div>
    <div class="no-order" v-else>
      <p>您还未产生订单</p>
    </div>
  </div>
</template>
<script>
import '@/assets/css/order/order.scss'
import AddressList from '@/component/address/AddressList.vue'
import { mapState } from 'vuex'
export default {
  components: {
    AddressList
  },
  data() {
    return {
      show: false,
      gid: ''
    }
  },
  computed: {
    ...mapState({
      orderList: state => state.cart.orderList
    })
  },
  watch: {
    orderList(newVal, oldVal) {
      newVal = this.$store.state.cart.orderList
    }
  },
  methods: {
    getAddress() {
      return document.getElementById('chooseAddress')
    },
    // 显示地址选项
    showPopup(gid) {
      this.show = true
      // 获取到当前商品id
      this.gid = gid
    },
    // 操作地址
    getAid(aid) {
      // 隐藏地址选项
      this.show = false
      // 根据id获取当前地址
      this.$store.commit('address/GET_ADDRESS_BY_ID', aid)
      const curAddr = this.$store.state.address.curAddr
      curAddr.gid = this.gid
      // 根据id给当前商品添加id
      this.$store.commit('cart/ADD_ORDER_ADDRESS', curAddr)
    },
    // 删除订单
    cancelOrder(gid) {
      if (confirm('您确认要取消当前订单吗?')) {
        this.$store.commit('cart/CANCEL_ORDER', gid)
      }
    },
    // 支付订单
    payOrder(gid) {
      this.$store.commit('cart/SUBMIT_ORDER', gid)
    }
  }
}
</script>
<style lang="scss" >
// .order {
//   width: 100%;
//   box-sizing: border-box;
//   padding: 0 10px;
//   .order-list {
//     .order-goods {
//       margin-bottom: 10px;
//       box-sizing: border-box;
//       padding: 15px;
//       border-radius: 8px;
//       font-size: 14px;
//       line-height: 1.4;
//       border: 1px solid #ddd;
//       > div {
//         display: flex;
//       }
//       .order-hd {
//         justify-content: space-between;
//         .g-store {
//           i {
//             color: #999;
//           }
//         }
//         .g-state {
//           color: #999;
//         }
//       }
//       .order-bd {
//         margin: 10px 0;
//         img {
//           align-self: center;
//           height: 90px;
//           border-radius: 10px;
//         }
//         .g-desc {
//           font-size: 12px;
//           span {
//             font-weight: 600;
//           }
//           text-indent: 15px;
//           .g-title {
//             font-size: 14px;
//             font-weight: 600;
//             color: #ff0092;
//           }
//           .g-total {
//             b {
//               color: #ff0029;
//             }
//           }
//         }
//       }
//       .order-operate {
//         justify-content: space-between;
//         .o-more {
//           align-self: center;
//           color: #999;
//         }
//         .van-button {
//           height: 35px;
//         }
//         .van-overlay {
//           background: rgba(0, 0, 0, 0.2);
//         }
//         .user-addr {
//           width: 100%;
//           box-sizing: border-box;
//           padding: 15px;
//         }
//       }
//     }
//   }
//   .no-order {
//     margin-top: 10px;
//     width: 100%;
//     text-align: center;
//     font-size: 14px;
//     color: #888;
//   }
// }
</style>